<template>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <ul>
        <li
          @click="
            dialogFormVisible = true;
            flag = 1;
          "
          v-if="!$store.state.users.userName"
        >
          登录 |
        </li>
        <li
          v-if="!$store.state.users.userName"
          @click="
            dialogFormVisible = true;
            flag = 2;
            ruleForm = {};
          "
        >
          注册
        </li>
        <li v-if="$store.state.users.userName">欢迎</li>
        <li v-if="$store.state.users.userName">
          <el-popover placement="top" width="160" v-model="visible">
            <p>确定退出登录吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="CleanLoin"
                >确定</el-button
              >
            </div>
            <span slot="reference"> {{ $store.state.users.userName }}</span>
          </el-popover>
        </li>
        <li @click="orderTiao">我的订单</li>
        <li @click="collectTiao">我的收藏</li>
        <li class="li1" @click="shoppingTiao">
          <i class="el-icon-shopping-cart-full"></i> 购物车 (
          <span>{{ $store.state.pic.length }}</span> )
        </li>
      </ul>
    </el-header>
    <!-- 内容 -->
    <el-main>
      <!-- logo布局 -->
      <div class="head-wrapper">
        <!-- logo -->
        <div class="img-logo">
          <img src="http://101.132.181.9/img/logo.c8999c02.png" alt="" />
        </div>
        <!-- 标签页 -->
        <div class="tags-box">
          <el-menu
            active-text-color="#409eff"
            class="el-menu-demo"
            mode="horizontal"
            router
          >
            <el-menu-item index="/homelaybel"> 首页 </el-menu-item>
            <el-menu-item index="/goods"> 全部商品 </el-menu-item>
            <el-menu-item index="/about"> 关于我们 </el-menu-item>
          </el-menu>
        </div>
        <!-- 搜索 -->
        <div class="search-box">
          <el-input
            placeholder="请输入内容"
            v-model="queryModel.search"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getSearch()"
            ></el-button>
          </el-input>
        </div>
      </div>

      <div class="content-wrapper">
        <router-view></router-view>
      </div>
    </el-main>
    <!-- 登录框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="20%"
      center
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item prop="userName" label-width="0">
          <el-input
            v-model="ruleForm.userName"
            prefix-icon="el-icon-user-solid"
            placeholder="请输入用户名"
            :maxlength="16"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label-width="0">
          <el-input
            v-model="ruleForm.password"
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"
            type="password"
            :maxlength="18"
          ></el-input>
        </el-form-item>

        <el-form-item prop="qrpassword" label-width="0" v-show="flag == 2">
          <el-input
            v-model="ruleForm.qrpassword"
            prefix-icon="el-icon-lock"
            placeholder="请确认输入密码"
            type="password"
            :maxlength="18"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          style="width: 80%"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 尾部 -->
    <footer>
      <div class="footer-box">
        <ul>
          <li>
            <div class="imgss"></div>
            7天无理由退换
          </li>
          <li>
            <div class="imgss"></div>
            货满99元全场免邮
          </li>
          <li>
            <div class="imgss"></div>
            100%品质保证
          </li>
        </ul>
      </div>
      <div class="center">
        <p><img src="../assets/imgs/github.png" alt="" /></p>
        <p class="p">
          <span @click="$router.push('/homelaybel')">首页</span> |
          <span @click="$router.push('/goods')">全部商品</span> |
          <span @click="$router.push('/about')">关于我们</span>
        </p>

        <p>商城版权所有 2012-2021</p>
      </div>
    </footer>
  </el-container>
</template>


<script>
import { login, Register, searchList } from "@/api/login.js";
export default {
  name: "home",
  data() {
    return {
      userId: this.$store.state.users.user_id,
      searchdata: [],
      visible: false,
      /**
       * 登录数据
       */
      ruleForm: {
        userName: "",
        password: "",
        qrpassword: "",
      },
      /**
       * 验证规则
       */
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 5,
            max: 16,
            message: "字母开头,长度5-16之间,允许字母数字下划线",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "字母开头,长度6-18之间,允许字母数字和下划线",
            trigger: "blur",
          },
        ],
        qrpassword: [
          { message: "请输入确认密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "字母开头,长度6-18之间,允许字母数字和下划线",
            trigger: "blur",
          },
        ],
      },
      /**
       * 登录框
       */
      dialogFormVisible: false,
      /**
       * 搜索关键词
       */
      query: "",
      /**
       * 默认标签页的状态
       */
      activeName: "home",

      flag: 1,

      queryModel: {
        currentPage: 1,
        pageSize: 15,
        search: "",
      },
    };
  },
  created() {},
  computed: {
    title() {
      return this.flag == 1 ? "登录" : "注册";
    },
  },
  methods: {
    /***
     * 搜索
     */
    async getSearch() {
      const res = await searchList(this.queryModel);
      console.log(res.data.Product, "搜索");
      if (res.data.code === "001") {
        this.searchdata = res.data.Product;
        this.$store.commit("addSearch", this.searchdata);
        this.$router.push(`/goods?search=${this.queryModel.search}`);
      }
    },
    /**
     * 订单的跳转
     */
    orderTiao() {
      if (this.userId === undefined) {
        console.log(this.userId);
        this.dialogFormVisible = true;
      } else {
        this.$router.push({ name: "order" });
      }
    },
    /**
     * 收藏跳转
     */
    collectTiao() {
      if (this.userId === undefined) {
        console.log(this.userId);
        this.dialogFormVisible = true;
      } else {
        this.$router.push({ name: "collect" });
      }
    },
    /**
     * 购物车跳转
     */
    shoppingTiao() {
      if (this.userId === undefined) {
        console.log(this.userId);
        this.dialogFormVisible = true;
      } else {
        this.$router.push({ name: "shoppingCart" });
      }
    },
    /**
     * 退出登录
     */
    CleanLoin() {
      this.$store.dispatch("cleantoken");
    },
    /**
     * 登录
     */
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const res = await (this.flag == 1 ? login : Register)(this.ruleForm);
          if (res.data.code === "001" && res.data.msg == "登录成功") {
            this.dialogFormVisible = false;
            this.$store.commit("setuser", res.data.user);

            this.$notify.success({
              title: "成功",
              message: res.data.msg,
              showClose: false,
            });
          }


          
          if (res.data.code === "001" && res.data.msg == "注册成功") {
            this.dialogFormVisible = false;
            this.$notify.success({
              title: "成功",
              message: res.data.msg,
              showClose: false,
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  ul {
    list-style: none;
  }
  div {
    box-sizing: border-box;
  }
}
// 布局容器布局
.el-container {
  height: 100% !important;
  direction: flex;
  flex-direction: column;
}
footer {
  width: 100%;
  height: 400px;
  text-align: center;
  background: #2f2f2f;
  padding-bottom: 20px;
  .footer-box {
    height: 145px;
    width: 100%;
    display: flex;
    border-bottom: 1px solid #3d3d3d;
    ul {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      li {
        width: 33.33%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 20px;
        // background: url(./../assets/imgs/us-icon.png) no-repeat left 0;
        color: #fff;
        .imgss {
          background: url(../assets/imgs/us-icon.png) no-repeat;
          width: 55px;
          height: 33px;
          background-position: 10px -4px;
        }
      }
    }
  }
  .center {
    width: 250px;
    margin: 50px auto;
    .p {
      display: flex;
      justify-content: space-between;
      text-align: center;
      margin: 20px 0;
      font-size: 20px;
      color: #ccc;
      span {
        font-size: 16px;
      }
      span:hover {
        cursor: pointer;
        color: #fff;
      }
    }
    p {
      &:first-child {
        img {
          margin: 0 auto;
          display: block;
        }
      }

      &:last-child {
        text-align: center;
        color: #ccc;
        font-size: 16px;
      }
    }
  }
}

.el-main {
  width: 100%;
  height: 100%;
  padding: 20px 0 !important;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  //头部布局
  .head-wrapper {
    width: 1225px;
    height: 61px;
    background: white;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tags-box {
      margin-left: -300px;
    }
  }
  .search-box {
    height: 40px;
    width: 300px;
  }
}
//内容布局
.content-wrapper {
  margin-top: 5px;
  width: 100% !important;
  height: 100%;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
// 头部Tab

.el-header {
  height: 40px !important;
  background-color: #3d3d3d;
  color: #b0b0b0;
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 100px;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    li {
      width: 100px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px !important;

      &:hover {
        color: white;
      }
      &:hover.li1 {
        color: rgb(223, 85, 26);
        background: white;
      }
    }
    li:nth-child(1) {
      display: flex;
      justify-content: flex-end;
    }
    li:nth-child(2) {
      padding-left: 5px;
      width: 70px;
      display: flex;
      justify-content: flex-start;
    }
  }
}
</style>